<template>
  <div style="height: 100%;">

    <div style="overflow: hidden;background-color: #fff;margin-top: 1%;height: 90%;position: relative;">
      <div
        style="position: absolute;top: 0;width: 28%;z-index: 10;padding: 15px;background-color: #fff;box-sizing: border-box;">
        <el-button type="primary" size="mini" v-for='(btn,index) in newBtn' v-if="btn.position=='header'" :key='index'
          :type="btn.type || 'info'" :icon="btn.icon || 'view'" :size="btn.size || 'mini'"
          @click='onBtnEvent({data:{},btnIndex:index,btn:btn})'>
          {{
                typeof btn.text === 'string' ? btn.text : (typeof btn.text === 'function' ? btn.text({
                data     : {},
                btnIndex : index,
                btn      : btn
                 }) : '')
              }}
        </el-button>
      </div>
      <div class="leftTable">
        <div style="border: 1px solid #f5f5f5;">
			<div class="sale-box" v-for="(item,index) in list" :key="index"
			  :style="chooseData.id==item.id?'border-left: 3px solid #00b7ee;':''">
			  <div style="overflow: hidden;margin-bottom: 10px;padding: 20px 0;cursor: pointer;"
			    @click="change(item,index)">
			    <el-image
			    v-if="item&&item.mainImg&&item.mainImg.length>0"
			    :src="item&&item.mainImg&&item.mainImg[0]&&item.mainImg[0].url"
			      style="width: 140px; height: 90px" class="sale-img" fit="scale-down"
			      :preview-src-list="item&&item.mainImg&&item.mainImg[0]&&item.mainImg[0].url?[item.mainImg[0].url]:[]">
			      <div slot="error" class="image-slot">
			        <i class="el-icon-picture-outline" v-if="item&&item.mainImg&&item.mainImg[0]&&item.mainImg[0].type=='image'"></i>
							<i class="el-icon-video-camera" v-if="item&&item.mainImg&&item.mainImg[0]&&item.mainImg[0].type=='vedio'"></i>
			      </div>
			    </el-image>
			    <div style="float: left;width: 57%;">
			      <div style="font-size: 16px;margin-bottom: 10px;">ID:{{item.id}}</div>
			      <div class="avoidOverflow" style="font-size: 16px;margin-bottom: 10px;">{{item.title}}</div>
			      <div class="avoidOverflow" style="font-size: 14px;color: #666;margin-bottom: 7px;height: 16px;">
			        {{item.passage1}}
			      </div>
			      <div style="font-size: 12px;color: #999;">{{item.create_time}}</div>
			    </div>
			  </div>
			  <div style="overflow: hidden;">
			    <div style="padding-left: 5%;float: right;" v-for='(btn,index) in newBtn' :key="index">
			      <el-button size="mini" circle style="background-color: #fff;border-color:#e1e1e1;color: #888;"
			        v-if="btn.position=='list'&&(!btn.isHide||(btn.isHide&&!btn.isHide(item,self)))"
			        :type="btn.type || 'info'" :icon="btn.icon || 'view'"
			        @click='onBtnEvent({list:list,data:item,dataIndex:main_index,btnIndex:index,btn:btn})'>
			      </el-button>
			    </div>
			  </div>
			</div>
		</div>
      </div>
      <div class="rightTable">
        <div style="text-align: center;border-bottom: 1px dashed #E1E1E1;padding: 30px 0;">
          <div style="font-size: 22px;font-weight: bold;margin-bottom: 10px;">{{chooseData.title}}</div>
          <div style="font-size: 14px;color: #666;margin-bottom: 10px;">{{chooseData.small_title}}</div>
          <div style="font-size: 14px;color: #666;margin-bottom: 10px;">{{chooseData.passage1}}</div>
          <div style="font-size: 12px;color: #999;">
            <span>{{chooseData.create_time?chooseData.create_time:''}}</span>
            <span
              style="padding-left: 20px;">创建人：{{chooseData.User&&chooseData.User.name?chooseData.User.name:chooseData.user_no}}</span>
          </div>
        </div>
        <div style="overflow: hidden;padding-top: 2%;border-bottom: 1px dashed #E1E1E1;font-size: 16px;"
          v-if="chooseData.description">
          <div class="details-box">
            <span style="color: #666;">描述：</span>
            <span class="">{{chooseData.description}}</span>
          </div>
        </div>
        <div style="padding: 20px 0;" v-html="chooseData.content"></div>
        <el-empty description="没有内容" v-if="!chooseData.content"></el-empty>
        <div style="overflow: hidden;padding-top: 2%;border-bottom: 1px dashed #E1E1E1;border-top: 1px dashed #E1E1E1;font-size: 16px;"
        v-if="chooseData&&chooseData.mainImg&&chooseData.mainImg.length>0">
          <div class="details-box">
            <span style="color: #666;">媒体文件展示：</span>
            <div style="margin-bottom: 5px;" v-for="(c_item,c_index) in chooseData.mainImg" :key="c_index">
               <div v-if="c_item.type&&c_item.type=='image'">
                 <el-image
                     style="width: 100px; height:auto; margin-right: 5px;"
                     :src="c_item.url"
                     :preview-src-list="[c_item.url]">
                   </el-image>
               </div>
               <div v-else-if="c_item.type&&c_item.type=='vedio'">
									<a :href="c_item.url" target="_blank">{{c_item.title}}</a>
               </div>
               <div v-else>
                 <a target='_blank'  v-if="c_item.title&&c_item.title.indexOf('pdf')==-1"
                 :href="'https://view.officeapps.live.com/op/view.aspx?src='+c_item.url">{{c_item.title}}</a>
                 <a target='_blank' v-else :href="c_item.url">{{c_item.title}}</a>
               </div>
            </div>
          </div>
        </div>
        <div style="overflow: hidden;padding-top: 2%;border-bottom: 1px dashed #E1E1E1;border-top: 1px dashed #E1E1E1;font-size: 16px;"
        v-if="chooseData&&chooseData.bannerImg&&chooseData.bannerImg.length>0">
          <div class="details-box">
            <span style="color: #666;">文件附件：</span>
            <div style="margin-bottom: 5px;" v-for="(c_item,c_index) in chooseData.bannerImg" :key="c_index">
               <div v-if="c_item.type&&c_item.type=='image'">
                 <el-image
                     style="width: 60px; height: 60px"
                     :src="c_item.url"
                     :preview-src-list="[c_item.url]">
                   </el-image>
               </div>
               <div v-else>
                 <a target='_blank'  v-if="c_item.title&&c_item.title.indexOf('pdf')==-1"
                 :href="'https://view.officeapps.live.com/op/view.aspx?src='+c_item.url">{{c_item.title}}</a>
                 <a target='_blank' v-else :href="c_item.url">{{c_item.title}}</a>
               </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%;position: relative;margin-top: 30px;">
      <el-col :span="24" class='btm-action'>
        <el-pagination v-if='paginate' class='pagination' :page-sizes="paginate.page_sizes"
          :page-size="paginate.pagesize" :page-count="paginate['page-count']" :layout="paginate.layout"
          :total="paginate.count" :current-page='paginate.current_page' @current-change='onChangeCurrentPage'
          @size-change='onChangePageSize'>
        </el-pagination>
      </el-col>
    </div>

  </div>
</template>

<script>
  import SolelyContentJs from './solely-content.js'

  export default SolelyContentJs
</script>
<style>
  .leftTable {
    float: left;
    width: 28%;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid #E1E1E1;
    padding: 50px 2% 70px 1%;
    box-sizing: border-box;
  }

  .saleimg {
    width: 26px;
    height: 26px;
    display: block;
  }

  .sale-box {
    padding: 15px;
    border-bottom: 1px dashed #E1E1E1;
    box-sizing: border-box;
	/* box-shadow: 0 0 10px 4px rgba(0,0,0,0.05); */
  }

  .sale-box:nth-last-child(1) {
    border-bottom: none;
  }

  .sale-img {
    width: 140px;
    height: 90px;
    display: block;
    float: left;
    margin-right: 10px;
    background-color: #f5f5f5;
  }

  .image-slot {
    font-size: 50px;
    color: #c2c2c2;
    line-height: 90px;
    text-align: center;
  }

  .avoidOverflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rightTable {
    float: left;
    width: 72%;
    height: 100%;
    overflow-y: auto;
    padding: 0 5% 20px;
    box-sizing: border-box;
    font-size: 16px;
  }

  .details-box {
    width: 100%;
    /* border-right: 1px solid #E1E1E1; */
    padding-right: 2%;
    box-sizing: border-box;
    float: left;
    margin-bottom: 2%;
    font-size: 14px;
    display: flex;
  }

  .details-box:nth-child(2n) {
    border-right: none;
    padding-left: 2%;
    padding-right: 0;
  }

  .details-img {
    width: 120px;
    height: 70px;
    display: flex;
    float: left;
    margin-right: 10px;
  }

  /* 滚动条 */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-thumb {
    transition: all 0.3s;
    background-color: rgba(193, 193, 193, 0.1);
    background-clip: padding-box;
    border-width: 3px;
    border-color: transparent;
    border-style: solid;
    border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(189, 189, 189, 0.3);
    background-clip: border-box;
  }

  .pagination {
    display: inline-block;
    padding: 0;
  }

  /* .foot-page{background-color: #fff;width: 100%;display: flex;justify-content: center;margin-top: 1%;box-shadow: 0 0 11px 1px rgba(0,0,0,0.18);} */
</style>
